<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('属性列表')" />
	<th:block th:include="include :: layout-latest-css" />
	<th:block th:include="include :: select2-css" />
</head>
<body class="gray-bg">

<div class="container-div">
	<div class="row">

		<div class="btn-group-sm" id="toolbar" role="group" style="display: inline-flex;width: 800px;">

			<div style="width:90px">
				<button type="button" class="btn btn-primary btn-sm" onclick="xinzeng()" >
					<i class="fa fa-plus"></i> 新增
				</button>
			</div>
			<div style="width:90px">
				<button type="button" class="btn btn-primary btn-sm" onclick="copyProperty()" >
					<i class="fa fa-copy"></i> 复制模板
				</button>
			</div>
			<form id="searchForm">
				<div style="width:200px;display: inline-flex;">
					<div style="width: 70px;height: 32px;line-height: 32px;text-align: right">
						应用：
					</div>
					<div>
						<select id="appCode" name="appCode"  style="width: 100px;">
						</select>
					</div>
				</div>
				<div style="width:210px;display: inline-flex;">
					<div style="width: 70px;height: 32px;line-height: 32px;text-align: right">
						模板：
					</div>
					<div>
						<select id="templateKey" name="templateKey"  style="width: 155px;" >
							<option value="">请选择</option>
						</select>
					</div>
				</div>

			</form>


		</div>

		<div class="col-sm-12 select-table table-condensed " style="height:98%;">
			<table id="bootstrap-table"></table>
		</div>
	</div>
</div>

<th:block th:include="include :: footer" />
<th:block th:include="include :: select2-js" />

	<script th:inline="javascript">
		var editFlag ;
		var removeFlag ;
		var prefix = ctx + "m/property";

		function xinzeng(){
			var appCode = $("#appCode").val();
			var templateKey = $("#templateKey").val();
			if (templateKey==null){
				templateKey="";
			}
			$.operate.openAdd("","","?appCode="+appCode+"&templateKey="+templateKey);
		}

		function queryParams(params) {
			var search = $.table.queryParams(params);
			return search;
		}

		function searchPre() {
			$.table.search('searchForm', 'bootstrap-table');
		}

		common.loadApp("appCode","",true);
		$('#appCode').select2({
			allowClear: false,
			width:"120"
		});

		var appCode = $("#appCode").val();
		common.loadTemplate("templateKey","",appCode);
		$('#templateKey').select2({
			allowClear: false,
			width:"130"
		});

		$("#appCode").on("change",function () {
			var appCode = $("#appCode").val();
			common.loadTemplate("templateKey","",appCode);
			$('#templateKey').select2({
				allowClear: false,
				width:"130"
			});
		})
		$("#templateKey").on("change",function () {
			searchPre();
		});

		$(function() {
		    var options = {
		        url: prefix + "/page",
		        createUrl: prefix + "/add",
		        updateUrl: prefix + "/edit?id={id}",
		        removeUrl: prefix + "/deleteById",
		        exportUrl: prefix + "/export",
		        modalName: "属性",
				sortName: "createDate",
				sortOrder: "desc",
				method:"get",
				queryParams:queryParams,
		        columns: [
					{
						field: 'priority',
						title: '优先级',
						align: 'center'
					},
					{
						field: 'attributeType',
						title: '模板',
						align: 'center',
						formatter:function (value, row, index) {
							if (value==0){
								return "<span style='color: red;'>公共属性</span>";
							}else if (value==1){
								return row.templateKey+"模板";
							}
							return "未知";
						}
					},
					{
						field: 'propertyName',
						title: '属性名称',
						align: 'center'
					},
					{
						field: 'propertyKey',
						title: '属性key',
						align: 'center'
					},


					{
						field: 'labelType',
						title: '标签类型',
						align: 'center'
					},
					{
						field: 'propertyType',
						title: '属性类型',
						align: 'center'
					},
					{
						field: 'columnLength',
						title: '属性长度',
						align: 'center'
					},
					{
						field: 'labelRequired',
						title: '是否必填',
						align: 'center',
						formatter: function(value, row, index) {
							if (value==1){
								return "<span style='color: red'>必填</span>"
							}else {
								return "非必填"
							}
						}
					},
					{
						field: 'defaultValue',
						title: '默认值',
						align: 'center'
					},
					{
						field: 'variableKey',
						title: '常量key',
						align: 'center'
					},
					{
						field: 'showTable',
						title: 'table页',
						align: 'center',
						formatter: function(value, row, index) {
							if (value==1){
								return "<span style='color: #1a7bb9;font-weight: bold'>显示</span>"
							}else {
								return "不显示"
							}
						}
					},
					{
						field: 'createDate',
						title: '创建时间',
						sortable: false,
						align: "center"
					},
					{
						title: '操作',
						align: 'center',
						formatter: function(value, row, index) {
							var actions = [];
							actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
							actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a> ');
							return actions.join('');
						}
					}]
		    };
		    $.table.init(options);
		});

		function copyProperty() {

			$.modal.openFull("属性复制",prefix+"/copyProperty","","");
		}

	</script>
</body>
</html>